<template>
  <div
    ref="el"
    class="preview"
  >
    <div
      @mouseleave="handleSourceLeave"
      class="preview__items"
    >
      <div
        class="preview__item"
        v-for="(item, index) in propData"
        :key="index"
        @mouseenter="handlePictureEnter(item.url)"
      >
        <CreativeMaterial :url="item.url"></CreativeMaterial>
        <div
          v-if="!disabled"
          class="preview__mask"
        >
          <i
            @click="handleRemove(item)"
            class="el-icon-circle-close"
          ></i>
        </div>
      </div>
    </div>
    <div
      @mouseenter="handleTargetEnter"
      @mouseleave="handleTargetLeave"
      class="preview__target"
      :class="[direction]"
      :style="{
        width: width + 'px',
        right: -width - 45 + 'px'
      }"
      v-show="targetVisible"
    >
      <CreativeMaterial
        :max-width="width + 'px'"
        :max-height="height + 'px'"
        :url="targetPreview"
        is-controls
      ></CreativeMaterial>
    </div>
  </div>
</template>

<script>
import CreativeMaterial from "@/components/creative-material";
export default {
  name: "PreviewPicture",
  components: {
    CreativeMaterial
  },
  props: {
    disabled: {
      type: Boolean,
      default: true
    },
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    width: {
      type: Number,
      default: 300
    },
    height: {
      type: Number,
      default: 300
    }
  },
  data() {
    return {
      propData: this.data,
      direction: "",
      targetTimer: null,
      targetVisible: false,
      targetPreview: ""
    };
  },
  watch: {
    data: {
      deep: true,
      handler(v) {
        this.propData = v;
      }
    }
  },
  methods: {
    handleRemove(item) {
      this.$emit("remove", item);
      this.targetVisible = false;
    },
    handlePictureEnter(url) {
      this.targetVisible = true;
      this.targetPreview = url;
      this.direction =
        this.$refs.el.getBoundingClientRect().y >
        (document.documentElement.clientHeight - 100) / 2
          ? "is-bottom"
          : "is-top";
    },
    handleSourceLeave() {
      this.targetTimer = setTimeout(() => {
        this.targetVisible = false;
      }, 300);
    },
    handleTargetEnter() {
      clearTimeout(this.targetTimer);
    },
    handleTargetLeave() {
      this.targetVisible = false;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/color";
.preview {
  position: relative;
  display: inline-block;
  &__items {
    overflow: hidden;
  }
  &__item {
    position: relative;
    float: left;
    width: 138px;
    height: 138px;
    line-height: 138px;
    border: 1px solid $--border-major;
    padding: 4px;
    border-radius: 3px;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
    &:not(:first-child) {
      margin-left: 5px;
    }
  }
  &__mask {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    color: $--background-high;
    font-size: 20px;
    text-align: center;
  }
  &__item:hover &__mask {
    display: block;
    cursor: pointer;
  }
  &__target {
    position: absolute;
    z-index: 10;
    min-height: 128px;
    text-align: center;
    padding: 10px;
    background: $--background-high;
    border: 1px solid $--border-major;
    &::before,
    &::after {
      content: " ";
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
    }
    &::before {
      left: -10px;
      border-width: 10px;
      border-left-width: 0;
      border-right-color: $--border-major;
    }
    &::after {
      left: -8px;
      border-width: 8px;
      border-left-width: 0;
      border-right-color: $--background-high;
    }
  }
  &__target.is-top {
    top: 0;
    &::before {
      top: 40px;
    }
    &::after {
      top: 42px;
    }
  }
  &__target.is-bottom {
    bottom: 0;
    &::before {
      bottom: 40px;
    }
    &::after {
      bottom: 42px;
    }
  }
}
</style>